// ! 变量
@import "base/base-variable";

html{
    font-size: 62.5%;
}

li{
    list-style: none;
}

// * 一
.header{
    height: 4rem;
    background-color: $color-black-dark;
}

.header__navigation-box{
    position: relative;
    margin: auto;
    width: $width-banner;
    height: 4rem;
    background-color: $color-black-dark;
}

.header__navigation-big{
    float: left;
    width: 72.9rem;
    height: 4rem;
    font-size: 1.2rem;
    color: $color-grey-light;
    text-align: center;
    line-height: 4rem;

    & li{
        float: left;
        padding: 0 .6rem 0 .5rem;
    }
    
    & span{
        float: left;
    }
    
    & li:hover{
        color: $color-white;
    }
}

// * 二维码三角形
.header__QRCode-triangle{
    position: absolute;
    width: 0;
    height: 0;
    top:3rem;
    left: 57.6rem;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid $color-white;
    display: none;
}

// * 二维码框
.header__QRCode-box{
    box-sizing: border-box;
    position: absolute;
    width: 12.4rem;
    height: 14.8rem;
    top: 4rem;
    left: 52.5rem;
    padding: 1.8rem;
    box-shadow: 0 0 1rem $color-grey;
    background-color: $color-white;
    display: none;
    // animation: QRCode-show .3s ease-out;

    & img{
        height: 9rem;
        margin-bottom: 1rem;
    }

    & p{
        font-size: 1.4rem;
    }
}

// * 划过二维码
.header__navigation-QRCode:hover .header__QRCode-box{
    display: block;
    // animation: QRCode-show .3s ease-out;
}

// * 登录,注册
.header__navigation-sml{
    position: absolute;
    width: 14.2rem;
    height: 4rem;
    font-size: 1.2rem;
    color: $color-grey-light;
    text-align: center;
    line-height: 4rem;
    right: 16rem;

    & li{
        float: left;
        padding: 0 .6rem 0 .6rem;
    }
    
    & span{
        float: left;
    }
    
    & li:hover{
        color: $color-white;
    }
}

// * 购物车
.header__navigation-cart{
    position: absolute;
    width: 12rem;
    height: 4rem;
    background-color:#424242;
    font-size: 1.4rem;
    color: $color-grey-light;
    text-align: center;
    line-height: 4rem;
    right: 0;

    & li:hover{
        background-color: $color-white;
        color: $color-orange;
    }
}

// * 购物车框
.header__cart-box{
    position: absolute;
    height: 10rem;
    width: 35rem;
    background-color: $color-white;
    box-shadow: 0 0 1rem $color-grey;
    right: 0;
    top: 4rem;
    text-align: center;
    line-height: 10rem;
    display: none;
}

// * 二
.header__navigation-box2{
    position: relative;
    height: 10rem;
    width: $width-banner;
    margin: auto;
}

.header__logo img{
    height: 5.6rem;
    padding: 2.2rem 0;

    &:hover{
        margin-left: .1rem;
        transition: all .1s;
    }
}

.header__navigation-big2{
    width: 70rem;
    height: 5.6rem;
    margin-left: 18rem;
    font-size: 1.6rem;
    text-align: center;
    line-height: 5.6rem;
    margin-top: -8rem;
    
    & li{
        float: left;
        padding: 0 1.5rem 0 1.5rem;

        &:hover {
            color: $color-orange;
            transition: all .3s ease-out;
        }
    }
    
    
}

// * 搜索框
.header__navigation-searchIpt{
    float: right;
    width: 29.9rem;
    height: 5rem;
    margin-top: -5.5rem;
    font-size: 1.6rem;
    line-height: 5rem;

    & input{
        width: 24.5rem;
        height: 4.8rem;
        border: none;
        outline: none;
        caret-color: $color-orange;
        border: 1px solid $color-grey;
        font-size: 20px;

        &:hover{
            border-color: rgb(141, 141, 141);
            color: $color-orange;
            transition: all .3s linear;
        }
    }
    
    & span{
        position: absolute;
        width: 5rem;
        height: 4.8rem;
        border: 1px solid $color-grey;
        font-size: 2.8rem;
        font-weight: 700;
        text-align: center;

        &:hover{
            border-color: $color-orange;
            color: $color-white;
            background-color: $color-orange;
            transition: all .3s linear;
        }
    }
}

// * 预搜索结果展示框
.header__search-result{
    box-sizing: border-box;
    position: absolute;
    height: 24rem;
    width: 24.7rem;
    right: 5.2rem;
    top: 7.4rem;
    background-color: $color-white;
    border: 1px solid $color-orange;
    line-height: 3rem;
    display: none;

    & li:hover{
        background-color: $color-grey-veryLight;
    }
}

// * xiaomi手机
.header__navigation-menu ul{
    background-color: $color-white;
}

.header__menu-box1 {
    @include menu-primary-style;

    & li{
        @include menu-li-style;
    }
    & img{
        @include menu-img-style;
    }
    
    & span:nth-child(2){
        @include menu-span1-style;
    }
    
    & span:nth-child(3){
        @include menu-span2-style;
    }
}

// * redmi手机
.header__menu-box2 {
    @include menu-primary-style;

    & li{
        @include menu-li-style;
    }
    & img{
        @include menu-img-style;
    }
    
    & span:nth-child(2){
        @include menu-span1-style;
    }
    
    & span:nth-child(3){
        @include menu-span2-style;
    }
}

// * 电视
.header__menu-box3 {
    @include menu-primary-style;

    & li{
        @include menu-li-style;
    }
    & img{
        @include menu-img-style;
    }
    
    & span:nth-child(2){
        @include menu-span1-style;
    }
    
    & span:nth-child(3){
        @include menu-span2-style;
    }
}

// * 笔记本
.header__menu-box4 {
    @include menu-primary-style;

    & li{
        @include menu-li-style;
    }
    & img{
        @include menu-img-style;
    }
    
    & span:nth-child(2){
        @include menu-span1-style;
    }
    
    & span:nth-child(3){
        @include menu-span2-style;
    }
}

// * 平板
.header__menu-box5 {
    @include menu-primary-style;

    & li{
        @include menu-li-style;
    }
    & img{
        @include menu-img-style;
    }
    
    & span:nth-child(2){
        @include menu-span1-style;
    }
    
    & span:nth-child(3){
        @include menu-span2-style;
    }
}

// * 家电
.header__menu-box6 {
    @include menu-primary-style;

    & li{
        @include menu-li-style;
    }
    & img{
        @include menu-img-style;
    }
    
    & span:nth-child(2){
        @include menu-span1-style;
    }
    
    & span:nth-child(3){
        @include menu-span2-style;
    }
}

// * 路由器
.header__menu-box7 {
    @include menu-primary-style;

    & li{
        @include menu-li-style;
    }
    & img{
        @include menu-img-style;
    }
    
    & span:nth-child(2){
        @include menu-span1-style;
    }
    
    & span:nth-child(3){
        @include menu-span2-style;
    }
}

// * 导航栏列表
.header__navList-big{
    position: relative;
    box-sizing: border-box;
    width: 122.6rem;
    height: 46rem;
    margin: auto;
}

.header__navList-box{
    width: 122.6rem;
    height: 46rem;
    margin: auto;
}

.header__navList{
    float: left;
    box-sizing: border-box;
    width: 23.4rem;
    height: 46rem;
    background-color: #877f78;
    padding-top: 1rem;

    & span{
        float:right;
    }
    
    & li{
        padding: 0 3.6rem 0 2.7rem;
        line-height: 4.5rem;
        color: $color-white;

        &:hover{
            background-color: $color-orange;
        }
    }
}

// * 轮播图
.header__slideshow-box{
    width: 99.2rem;
    height: 46rem;
    float: right;
    margin-top: -46rem;
    margin-bottom: 1.7rem;
    // display: none;

    &:hover{
        box-shadow: 0 0 20px $color-grey;
    }
}

.header__slideshow{
    position: absolute;
    width: 99.2rem;
    height: 46rem;
    // z-index: -1;

    & li{
        position: absolute;
        width: 99.2rem;
        height: 46rem;
        left: 0;
        top: 0;
        opacity: 0;
    }
    & img{
        width: 100%;
        height: 100%;
    }
}

// * 翻页按钮
.header__slideshow-box{
    & button{
        position: absolute;
        width: 5rem;
        height: 10rem;
        background-color: rgba($color-black,.4);
        border: 1px solid $color-grey;
        border-radius: .5rem;
        color: $color-white;
        font-size: 4rem;
        top: 18rem;
        display: none;

        &:nth-child(2){
            right: 0;
        }
    }
    
    &:hover button{
        display: block;
    }
}

// * 轮播图小圆点
.header__slideshow-dots{
    position: relative;
    width: 30.8rem;
    height: 5.4rem;
    left: 60rem;
    top: 40rem;

    & li{
        position: absolute;
        width: 5.4rem;
        height: .6rem;
        background-color: $color-grey;
        border-radius: 1rem;

        &:hover{
            background-color: $color-white;
        }

        &:nth-child(1){
            left: 6.35rem;
            top: 2.4rem;
        }

        &:nth-child(2){
            left: 12.7rem;
            top: 2.4rem;
        }

        &:nth-child(3){
            left: 19.05rem;
            top: 2.4rem;
        }

        &:nth-child(4){
            left: 25.4rem;
            top: 2.4rem;
        }
    }
}

// * 暂停轮播图
.header__slideshow-status{
    & li{
        position: absolute;
        left: 86rem;
        top: 41.6rem;
        display: none;
    }

    & .li2{
        left: 86rem;
    }

    & .start{
        font-size: 20px;
        color: $color-white;
    }
}

.header__navList-menu {
    position: absolute;
    width: 99.2rem;
    height: 46rem;
    background-color: $color-white;
    box-shadow: 0 0 1rem $color-grey;
    right: 0;
    top: 0;
    display: none;

    & li:hover{
        color: $color-orange;
    }
}

//  * 导航栏列表的二级菜单 
// ? 手机
.header__navList-box1{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 电脑
.header__navList-box2{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 笔记本
.header__navList-box3{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 家电
.header__navList-box4{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 穿戴
.header__navList-box5{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 智能
.header__navList-box6{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 电源
.header__navList-box7{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 健康
.header__navList-box8{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 耳机
.header__navList-box9{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ? 生活
.header__navList-box10{
    @include navList-primary-style;

    & li{
        @include navList-li-style;

        & img{
            @include navList-img-style;
        }
    }
}

// ! 侧边栏
.content__aside-sidebar{
    position: fixed;
    width: 8.4rem;
    height: 45.5rem;
    background-color: rgb(239, 239, 239);
    right: 0;
    top: 10rem;
    z-index: 100;

    & li{
        box-sizing: border-box;
        width: 8.4rem;
        height: 9.1rem;
        border: 1px solid rgb(235, 232, 232);
        color: $color-grey;
        text-align: center;
        line-height: 3rem;
        font-size: 2.4rem;
        padding-top: 1.6rem;

        &:hover{
            color: $color-orange;
            transition: all .3s linear;
        }
        
        &:hover span{
            color: $color-orange;
            transition: all .3s linear;
        }
    }
    
    & span{
        font-size: 1.6rem;
        color: $color-black-dark
    }
}

//  !返回顶部
.content__aside-toTop{
    position: fixed;
    overflow:visible;
    width: 8.4rem;
    height: 9.1rem;
    background-color: rgb(239, 239, 239);
    right: 0;
    bottom: 3rem;
    display: none;
    z-index: 100;
    transition: all 1s linear;

    & span{
        display: block;
        font-size: 6rem;
        text-align: center;
        line-height: 10rem;
        border: 1px solid $color-grey;
        color: rgb(23, 23, 23);
        border-radius: .5rem;
        border: none;
    }

    &:hover span{
        color: $color-orange;
        transition: all .3s linear;
    }
}

// ? 轮播图下一行 
.content__aside-new{
    position: absolute;
    width: 122.6rem;
    height: 17rem;
    bottom: -7rem;
    left: calc(50% - 61.3rem);
    top: 62rem;
}

.content__aside-primary{
    width: 23.4rem;
    height: 17rem;
    background-color: #5f5750;
    float: left;
    margin-right: 1.7rem;

    & li{
        box-sizing: border-box;
        width: 7.8rem;
        height: 8.6rem;
        border: 1px solid $color-grey;
        float: left;
        text-align: center;
        line-height: 3rem;
        font-size: 2rem;
        color: $color-grey;
        padding-top: 1rem;

        &:hover{
            color: $color-white;
            transition: all .3s linear;
        }
    }
    
    & span{
        font-size: 1.6rem;
    }
}

// ? 三张图片
.content__aside-sub{
    & li{
        width: 31.6rem;
        height: 17rem;
        float: left;
        margin-right: 1.35rem;

        &:nth-child(3){
            margin-right: 0;
        }
        
        &:hover{
            box-shadow: 0 0 2rem $color-grey;
        }
    }
    
    & img{
        width: 31.6rem;
        height: 17rem;
    }
}

//  ! 隔断 
.cutOff{
    height: 20rem;
    clear: both;
}

.main{
    background-color: $color-grey-main;
    padding-bottom: .5rem;
}

// ? 海报1
.main-poster1 img{
    display: block;
    height: 12rem;
    width: 122.6rem;
    margin: auto;
    margin-bottom: -3rem;
}

// ? 展示板块
.main__primary--box{
    position: relative;
    height: 68.6rem;
    background-color: $color-grey-main;
}

// ? 标题
.main__primary-title{
    width: 122.6rem;
    height: 2.8rem;
    margin: auto;
    margin-top: 8rem;

    & li{
        &:nth-child(1){
            float: left;
            font-size: 2.2rem;
            font-weight: 200;
        }
        
        &:nth-child(2) span{
            box-sizing: border-box;
            float: right;
            width: 2rem;
            height: 2rem;
            font-size: 1.2rem;
            background-color: $color-grey-light;
            border-radius: 50%;
            text-align: center;
            line-height: 2rem;
            margin-left: 1rem;
            color: $color-white;
            padding-left: .3rem;
        }
        
        &:nth-child(2){
            &{
                float: right;
                font-size: 1.6rem;
                font-weight: 100;
                color: $color-grey-middle;
            }
            
            &:hover{
                color: $color-orange;
                transition: all .3s linear;

                & span{
                    background-color: $color-orange;
                    transition: all .3s linear;
                }
            }
        }
    }
}

// ? 商品布局
.main__primary-commodity2{
    display:flex;
    flex-wrap: wrap;
    width: 122.6rem;
    align-content: space-between;
    margin: auto;
    margin-top: 1rem;

    & li{
        width: 23.4rem;
        height: 30rem;
        background-color: $color-white;
        text-align: center;
        line-height: 2rem;
        margin-right: .8rem;
        margin-bottom: 1rem;

        &:hover{
            box-shadow: 0 1rem 2rem #ccc;
            margin-top: -.2rem;
            transition: all .2s linear;
        }
        
        & img{
            height: 20rem;
        }
        
        & span{
            &:nth-child(3){
                color: $color-grey;
            }
            
            &:nth-child(5){
                color: $color-orange;
            }

            &:nth-child(7){
                color: green;
            }
        }
        
        &:nth-child(4):hover{
            margin-bottom: .2rem;
        }
        
        &:nth-child(6):hover{
            margin-bottom: .2rem;
        }
        
        &:nth-child(8):hover{
            margin-bottom: .2rem;
        }
        
        &:nth-child(10):hover{
            margin-bottom: .2rem;
        }

        & button{
            &:nth-child(2){
                color: $color-white;
                background-color: $color-red;
                border-radius: .5rem;
                margin-right: 2rem;
            }
    
            &:nth-child(3){
                color: $color-white;
                background-color: blue;
                border-radius: .5rem;
            }
        }
    }
}

// ? 海报2
.main-poster2 img{
    display: block;
    height: 12rem;
    width: 122.6rem;
    margin: auto;
    margin-top: 3rem;
}

// ? 视频布局
.main__primary-video{
    display: flex;
    width: 122.6rem;
    height: 29.6rem;
    margin: auto;
    margin-top: 2rem;
    justify-content: space-between;
    margin-bottom: 3rem;

    & li{
        &{
            position: relative;
            float: left;
            width: 29.6rem;
            height: 29.6rem;
            background-color: $color-white;
            text-align: center;
        }
        
        &:hover{
            &{
                margin-top: -.2rem;
                box-shadow: 0 1rem 2rem $color-grey;
                transition: all .3s ease-out;
            }
            
            & .span-play{
                background-color: $color-orange;
                border: $color-orange;
                border: .2rem solid $color-orange;
                transition: all .3s ease-out;
            }
        }
        
        & img{
            height: 18rem;
            width: 29.6rem;
            margin-bottom: 3rem;
        }
        
        & span{
            &:nth-child(3){
                position: absolute;
                width: 3.6rem;
                height: 2.4rem;
                border: .2rem solid $color-white;
                border-radius: 2rem;
                color: $color-white;
                text-align: center;
                line-height: 2.4rem;
                top: 14rem;
                left: 2rem;
            }
            
            &:nth-child(5){
                font-size: 1.4rem;
            }
        }
    }
}

// ? 底部
.footer__serve-box{
    display: flex;
    width: 122.6rem;
    height: 8rem;
    margin: auto;
    line-height: 8rem;
    justify-content: space-around;
}

.footer__serve-box li{
    float: left;
}

.footer__serve-box li:hover{
    color: $color-orange;
    transition: all .3s;
}

.footer__serve-box span{
    margin-left: 7.5rem;
    color: $color-grey;
}

// ? addBtn
.addBtn{
    display: block;
    width: 4rem;
    height: 2rem;
    background-color: aqua;
    text-align: center;
    line-height: 2rem;
    border-radius: 1rem;
    margin-left: 5rem;
    margin-bottom: 3rem;
}

// ? 添加
.addCommodity-box{
    box-sizing: border-box;
    position: fixed;
    width: 35rem;
    height: 30rem;
    background-color: #78a;
    font-size: 2rem;
    text-align: center;
    line-height: 3rem;
    padding-top: 2rem;
    border-radius: 1rem;
    top: calc(50% - 15rem);
    left: calc(50% - 17.5rem);
    display: none;
}

// ? 修改
.editCommodity-box{
    position: fixed;
    box-sizing: border-box;
    width: 35rem;
    height: 30rem;
    background-color: rgb(170, 119, 168);
    font-size: 2rem;
    text-align: center;
    line-height: 3rem;
    padding-top: 2rem;
    border-radius: 1rem;
    top: calc(50% - 15rem);
    left: calc(50% - 17.5rem);
    display: none;
}

// ? 商品列表
.commodity-list li{
    &{
        width: 30rem;
        height: 42rem;
        background-color: #78a;
        text-align: center;
        border-radius: 1rem;
        line-height: 3rem;
        padding-top: 1rem;
    }

    &:hover{
        box-shadow: 0 0 2rem $color-grey;
    }
    
    & p{
        &:nth-child(1){
            font-size: 3rem;
            font-weight: 700;
        }
        
        &:nth-child(2){
            font-size: 2rem;
            color: $color-red;
        }
        
        &:nth-child(4){
            font-size: 2rem;
            color: gold;
        }
    }

    & button{
        &:nth-child(5){
            background-color: red;
            color: $color-white;
            border-color: $color-white;
            border-radius: .5rem;
            margin-right: 3rem;
        }
        
        &:nth-child(6){
            background-color: blue;
            color: $color-white;
            border-color: $color-white;
            border-radius: .5rem;
        }

        &:nth-child(9){
            background-color: yellowgreen;
            color: $color-white;
            border-color: $color-white;
            border-radius: .5rem;
        }
    }
}